<!-- src/components/MacroStats.vue -->
<template>
  <div v-loading="loading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
    <el-form :model="form" label-width="90px" class="search-form">
      <el-form-item label="海关月报">
        <el-select v-model="form.report" placeholder="请选择">
          <el-option
            v-for="item in reportOptions"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="时间">
        <div class="date-type-group">
          <el-radio-group v-model="form.dateType" size="small">
            <el-radio label="year">按年</el-radio>
            <el-radio label="month">按月</el-radio>
          </el-radio-group>
        </div>
        <div class="date-pickers">
          <el-date-picker
            v-for="(field, idx) in formDateFields"
            :key="field"
            v-model="form[field]"
            :type="form.dateType"
            :placeholder="pickerPlaceholders[idx]"
            :disabled-date="disabledDate"
            class="date-picker"
          />
        </div>
      </el-form-item>

      <el-form-item label="进出口类型">
        <el-select v-model="form.type" multiple placeholder="请选择">
          <el-option
            v-for="item in tradeTypeOptions"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="计算方式">
        <el-select
          v-model="form.statisticsType"
          multiple
          placeholder="请选择计算方式"
          clearable
        >
          <el-option
            v-for="item in calculationTypeOptions"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item class="form-actions">
        <el-button @click="onReset">取消</el-button>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { QueryDataApi } from '../../api/Data'
import { toYearDate, toMonthDate, formatYear, formatYearMonth } from '../../utils/dateUtils'
import {bus} from '../../utils/bus'
const emit = defineEmits(['macro-search'])

// loading 状态
const loading = ref(true)

const form = ref({
  report: '',
  dateType: 'year',
  yearStart: null,
  yearEnd: null,
  yearMonthStart: null,
  yearMonthEnd: null,
  type: [],
  statisticsType: []
})

const reportOptions = ref([])
const tradeTypeOptions = ref([])
const calculationTypeOptions = ref([])

let minYear, maxYear, minYearMonth, maxYearMonth

const disabledDate = date => {
  const y = date.getFullYear()
  if (form.value.dateType === 'year') {
    return y < minYear || y > maxYear
  }
  const code = y * 100 + date.getMonth() + 1
  return code < minYearMonth || code > maxYearMonth
}

const formDateFields = computed(() =>
  form.value.dateType === 'year'
    ? ['yearStart', 'yearEnd']
    : ['yearMonthStart', 'yearMonthEnd']
)
const pickerPlaceholders = computed(() =>
  form.value.dateType === 'year'
    ? ['开始年份', '结束年份']
    : ['开始月份', '结束月份']
)

const onSearch = () => {
  const payload = {
    macroType: form.value.report ? [form.value.report] : [],
    exIm: form.value.type,
    statisticsType: form.value.statisticsType,
    pageNum: 1,
    pageSize: 20,
    timeType: form.value.dateType,
    timeStart: form.value.dateType === 'year'
      ? formatYear(form.value.yearStart)
      : formatYearMonth(form.value.yearMonthStart),
    timeEnd: form.value.dateType === 'year'
      ? formatYear(form.value.yearEnd)
      : formatYearMonth(form.value.yearMonthEnd)
  }
  bus.emit('macro-search', { params: payload, api: 'ChMacroSearch', prop: 'chinaBaseList' })
}

const onReset = () => {
  form.value = {
    report: '',
    dateType: 'year',
    yearStart: toYearDate(maxYear),
    yearEnd: toYearDate(maxYear),
    yearMonthStart: toMonthDate(maxYearMonth),
    yearMonthEnd: toMonthDate(maxYearMonth),
    type: [],
    statisticsType: []
  }
}

onMounted(() => {
  loading.value = true
  const p1 = QueryDataApi.getmacroType().then(res => {
    reportOptions.value = Object.values(res.data.macroType || {})
  })
  const p2 = QueryDataApi.getDate().then(res => {
    const d = res.data.timeRangeChina
    minYear = d.yearStart; maxYear = d.yearEnd
    minYearMonth = d.yearMonthStart; maxYearMonth = d.yearMonthEnd
    form.value.yearStart = toYearDate(maxYear)
    form.value.yearEnd = toYearDate(maxYear)
    form.value.yearMonthStart = toMonthDate(maxYearMonth)
    form.value.yearMonthEnd = toMonthDate(maxYearMonth)
  })
  const p3 = QueryDataApi.getTradeType().then(res => {
    tradeTypeOptions.value = Object.values(res.data.exIm || {})
  })
  const p4 = QueryDataApi.getCalculationType().then(res => {
    calculationTypeOptions.value = Object.values(res.data.statisticsType || {})
  })

  Promise.all([p1, p2, p3, p4])
    .finally(() => {
      loading.value = false
    })
})
</script>

<style scoped lang="scss">
.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.date-type-group {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.date-type-group .el-radio-group {
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.date-type-group .el-radio__label {
  font-size: 12px;
}
.date-pickers {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.date-picker {
  width: 160px;
  font-size: 12px;
}
.selected-time {
  margin-top: 6px;
  font-size: 14px;
  color: #409eff;
}
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
</style>
